<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Shopping</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen, projection, tv " />
  <link rel="stylesheet" type="text/css" href="css/html.css" media="screen, projection, tv " />

  <script src="./lib/prototype.js" type="text/javascript"></script>
  <script src="./lib/scriptaculous.js" type="text/javascript"></script>
  <script type="text/javascript" src="./yahoo/yahoodomevent/yahoo-dom-event.js"></script>
  <script type="text/javascript" src="./yahoo/history/history-beta-min.js"></script>
  <script type="text/javascript" language="javascript">
  // <![CDATA[
'a big blockquote br b center code div em form h1 h2 h3 h4 h5 h6 hr img iframe input i li ol option pre p script select small span strong style sub sup table tbody td textarea th tr ul u'.split(' ').each(function(e) {
  window['$' + e] = function() {
    if (arguments[0]) {
      if (arguments[0].nodeType) return Builder.node(e,$A(arguments));
      if (arguments[1]) return Builder.node(e,arguments[0],$A(arguments).slice(1));
      return Builder.node(e,arguments[0]);
    };
    return Builder.node(e);
  }
})

var cont_table = [];
var q_table = [];

// show :: Element -> IO ()
function show(el){
  //remove all children from <div id="main">.
  var e = $('main');
  while (e.firstChild) e.removeChild(e.firstChild);
  e.appendChild(el);
}

// action :: (unit -> Hash) -> (Hash -> IO ()) -> String
function action(func_q,thunk) {  
  var kurl = cont_table.push(thunk) - 1;  
  q_table[kurl] = func_q;
  return 'navi(' + kurl + ')';
}

// navi :: Number -> IO ()
function navi(kurl) {
 YAHOO.util.History.navigate('kurl',String(kurl));
}

// do_action :: Number -> IO ()
function do_action(kurl) {
  if (typeof q_table[kurl] === 'function')
    q_table[kurl] = q_table[kurl].call();
  var thunk = cont_table[kurl];
  thunk(q_table[kurl]);
}

function show_profile(query) {
  show($div($h1('プロフィール'),
	    $form({action: 'javascript:' + action(function() {
						    return $H({name: $('player_name').value, inventory: query['inventory'], gold: query['gold']});
						  },
						  show_status)},
		  '名前  ', $input({id: 'player_name'}), $input({type: 'submit'}))));
}

function show_inventory(query) {
  //remove all children from <div id="inventory">.
  var e = $('inventory');
  while (e.firstChild) e.removeChild(e.firstChild);
  e.appendChild($div($h1('アイテム'),
		     $ul(query['inventory'].map(function(x) {return $li(x)})),
		     $h2('所持金  ' + query['gold'] + 'G')));
}

function show_menu(query) {
  var e = $('menu');
  while (e.firstChild) e.removeChild(e.firstChild);
  e.appendChild($div($ul($li($a({href: 'javascript:void(0)', onfocus: 'blur()'},
				$span({class: 'title'}, 'ダンジョンに行く'),
				$span({class: 'desc'}, 'ただいま工事中です - 魔王より'))),
			 $li($a({onclick: action(query, show_shop), onfocus: 'blur()'},
				$span({class: 'title'}, '買いものをする'),
				$span({class: 'desc'}, '備えあれば憂いなし'))),
			 $li($a({onclick: action(query, show_status), onfocus: 'blur()'},
				$span({class: 'title'}, 'ステータス'),
				$span({class: 'desc'}, '心中の賊を破るは難し'))),
			 $li($a({href: '', onfocus: 'blur()'},
				$span({class: 'title'}, 'リセットする'),
				$span({class: 'desc'}, ''))))));
}

function show_status(query) {
  show_menu(query);
  show_inventory(query);
  show($div($h1('ステータス'),
	    $div({class: 'post'},
		 $div({class: 'date'},
		      $span({class: 'month'},'HP'),
		      $span({class: 'day'},18),
		      $span({class: 'month'},'MP'),
		      $span({class: 'day'},6)),
		 $p($span({class: 'title'}, '勇者 ' + query['name']),
		    $img({src: 'images/firefox.jpg', alt: 'firefox', class: 'floatLeft'}),
		    'Nulla commodo. In nunc justo, mollis sed, gravida at, aliquam sit amet, urna. Nulla commodo. In pharetra justo eget turpis. Nulla commodo. In pharetra justo eget turpis.  In nunc justo, mollis sed, gravida at, aliquam sit amet, urna.'),
		 $a({onclick: action(query, show_profile)},'名前を変更する')),
	    $div({class: 'post'},
		 $div({class: 'date'},
		      $span({class: 'month'},'HP'),
		      $span({class: 'day'},22),
		      $span({class: 'month'},'MP'),
		      $span({class: 'day'},'0')),
		 $p($span({class: 'title'}, '戦士 ふーばー'),
		    $img({src: 'images/firefox.jpg', alt: 'firefox', class: 'floatLeft'}),
		    'Nulla commodo. In nunc justo, mollis sed, gravida at, aliquam sit amet, urna.'),
		 $p('Samples: ',
		    $img({src: 'images/icon_samples.gif', alt: 'samples', class: 'alignBottom'}),
		    $a({href: ''}, 'More...')))));
}

function show_shop(query) {
  show_menu(query);
  show_inventory(query);
  var sellers_lines = '';
  if (arguments[1]) {
    sellers_lines = arguments[1];
  } else {
    sellers_lines = 'いらっしゃい!さあ見てってくんな!';
  };
  show($div($h1('ボッタクリ商店'),
	    $img({src: 'images/firefox.jpg',alt: 'firefox', class:'alignLeft border'}),
	    $blockquote($p(sellers_lines)),$br(),
	    [['ひのきのぼう',50],['なべのふた',20],['やくそう',10],['どくけしそう',30]].map
	    (function (item_info) {
	      return [$h2($a({onclick: action(query,function(q) {
						show($div($h1('ボッタクリ商店'),
							  $img({src: 'images/firefox.jpg',alt: 'firefox', class:'alignLeft border'}),
							  $blockquote($p(item_info[0] + 'は' + item_info[1] + 'Gだ。買うかい?')),$br(),$br(),
							  $a({onclick: action(query,function(q) {
										if (q['gold'] < item_info[1]) {
										  show_shop(q, 'お金が足りませんよ!');
										} else {
										  var q1 = $H({
										    name: q['name'],
											inventory: q['inventory'].concat([item_info[0]]),
											gold: q['gold'] - item_info[1]
											});
										  show_shop(q1, 'ありがとうよ!');
										}
									      })},
							     $h2('はい')),
							  $a({onclick: action(query, function(q) {
										show_shop(q, 'なんだ、やめるのかい。');
									      })},
							     $h3('いいえ'))))
						  })}, item_info[0], '  ', item_info[1], 'G'))];
	    })));
}
  // ]]>
  </script>
</head>
<body>
<script>
YAHOO.util.History.register('kurl', '0', function(state) {
  do_action(Number(state));
} );

YAHOO.util.History.onLoadEvent.subscribe(function() {
  cont_table = new Array();
  q_table = new Array();
  action($H({name: 'ほげほげ', inventory: ['こんぼう','ぬののふく','やくそう','どくけしそう'], gold: 100}),
  	 show_shop);
  do_action(0);
} );

YAHOO.util.History.initialize();
</script>
<!-- #content: holds all except site footer - causes footer to stick to bottom -->
<div id="content">

  <!-- #header: holds the logo and top links -->
  <div id="header" class="width">

    <img src="images/logo.gif" alt="Your logo goes here"/>

    <ul>
      <li><a href="">Back to Main page</a></li>
      <li><a href="">About us</a></li>
      <li><a href="">Streaming Video</a></li>
      <li><a href="" class="last">RSS Feeds</a></li>
    </ul>

  </div>
  <!-- #header end -->
  <!-- #headerImg: holds the main header image or flash -->
  <div id="headerImg" class="width"></div>




<!-- #menu: the main large box site menu -->
  <div id="menu" class="width"></div>
  <!-- #menu end -->
  <!-- #page: holds the page content -->
  <div id="page">
    <!-- #columns: holds the columns of the page -->
    <div id="columns" class="widthPad">
    <!-- Left thumbnail column -->
    <div class="floatLeft width25">
      <div id="inventory"></div>
    </div>
    <!-- Left thumbnails end -->
    <!-- Right column -->
    <div class="floatRight width75">
      <div id="main">Please enable the javascript.</div>
    </div>
    <!-- Right column end -->
    </div>
    <!-- #columns end -->
  </div>
  <!-- #page end -->
</div>
<!-- #content end -->




<!-- #footer: holds the site footer (logo and links) -->
<div id="footer">

  <!-- #bg: applies the site width and footer background -->
  <div id="bg" class="width">

    <img src="images/logo.gif" alt="Your logo goes here"/>

    <ul>
      <li><a href="">Sitemap</a></li>
      <li><a href="">Register</a></li>
      <li><a href="">Design inspired by</a></li>
      <li><a href="http://www.studio7designs.com" class="last">studio7designs.com</a></li>
	</ul>

  </div>
  <!-- #bg end -->

</div>
<!-- #footer end -->
</body>
</html>
